<!DOCTYPE html>
<body topmargin="0" marginheight="0" leftmargin="0" style="background-color: rgb(240,240,240);"></body>
<title>CodeVicent|MHY新闻资源搜索</title>
<head>
    <link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css"/>
    <script src="https://unpkg.com/mdui@1.0.2/dist/js/mdui.min.js"></script>
</head>
<style>
    html {
        user-select: none;
    }
    body{
        background-color: rgb(240,240,240);
    }
    .top_guide{
        display: flex;
        width: 100%;
        height: 45px;
        background-color: #f5f5f5;
        position: fixed;
        top: 0;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
        z-index: 999999;
    }
    .name_logo{
        color: #0077C2;
        font-size: 20px;
        margin-top: auto;
    }
    .top_m{
        margin-left: 50px;
        margin-top: 15px;
    }
    .function_guide{
        display: flex;
        margin: auto;
    }
    .function_button{
        width: 100px;
        height: 30px;
        border-radius: 30px;
        margin-left: 50px;
    }
    .function_button:hover{
        background-color: rgba(255, 255, 255, 0.543);
    }
    .function_button p{
        text-align: center;
        margin-top: 9px;
    }
    .up_top{
        width: 100%;
        height: 450px;
    }
    .up_top_main{
        padding-top: 5%;
        padding-left: 30px;
    }
    .input_bar{
        width: 80%;
        height: 150px;
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 10px;
        margin: auto;
        margin-top: 50px;
        display: flex;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    }
    .search_text{
        margin-top: 40px;
        text-align: center;
    }
    .search{
        width: 100%;
        height: 34px;
        display: flex;
        overflow: hidden;
        margin: 2% auto;
        margin-top: 10px;
    }
    .search input{
        float: left;
        width: 100%;
        height: 33px;
        padding-left: 10px;
        background-color: rgba(0, 255, 213,0);
        border: 2px solid rgb(0, 230, 192);
    }
    .button{
        display: block;
        text-align: center;
        text-decoration: none;
        padding: 10px 10px;
        width: 80px;
        height: 33px;
        background-color: rgb(0, 230, 192);
        font-size: 16px;
        color: #fff;
    }
    .result_box{
        width: 70%;
        height: auto;
        margin: auto;
    }
    .result_card{
        width: 100%;
        height: auto;
        border-radius: 25px;
        display: flex;
        background-color: white;
        margin-bottom: 20px;
        overflow: hidden;
    }
    .r_inf{
        height: 100%;
        width: 60%;
        padding-left: 50px;
    }
    .banner_bar{
        width: 50%;
        height: 100%;
        background-image: url("https://uploadstatic.mihoyo.com/contentweb/20201001/2020100112465815236.jpg");
        background-size: cover;
    }
    .under{
        width: 100%;
        height: auto;
        margin-top: 50px;
    }
    .button_bar{
        display: flex;
        margin-bottom: 15px;
    }
    .action_button{
        text-decoration: none;
        color: #59a5f5;
        width: 120px;
        height: 30px;
    }
    .action_button div{
        display: flex;
        height: 100%;
        width: 80%;
        margin: auto;
    }
    .action_button div img{
        width: 20px;
        height: 20px;
        margin-top: auto;
        margin-bottom: auto;
    }
    .action_button div p{
        margin-top: auto;
        margin-bottom: auto;
        margin-left: 3px;
    }
    .updata_b{
        width: 100%;
        margin:auto;
    }
    .bottom_show{
        padding: 5px;
    }
    .link{
        border: none;
        background-color: transparent;
        width: 100px;
        height: 30px;
        text-align: left;
    }
    .link:hover{
        background-color: rgb(206, 206, 206);
    }
    .jx_box{
        width: 80%;
        height: 75%;
        background-color: white;
        border-radius: 25px;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        z-index: 9999;
    }
    .loading{
        width: 100%;
        height: 100%;
        display: flex;
    }
    .loading img{
        width: 30%;
        margin: auto;
    }
    .fx_content_box{
        width: 80%;
        height: 100%;
        margin: auto;
        margin-top: 10px;
    }
    .scroll_box{
        overflow: scroll;
        width: 100%;
        height: 100%;
    }
    .scroll_box::-webkit-scrollbar {
        display: none;
    }
    .fx_content_box h1{
        color: #0077C2;
    }
    .img_pBox{
        display: flex;
        flex-wrap: wrap;
    }
    .img_pBox img{
        height: 220px;
        padding: 10px;
    }
    .a_vid{
        width: 90%;
        height: auto;
        margin: auto;
    }
    .a_vid div img{
        width: 30px;
        height: 30px;
        margin-top: auto;
        margin-bottom: auto;
    }
    .a_vid div p{
        margin-top: auto;
        margin-bottom: auto;
    }
    .a_vid video{
        width: 100%;
        margin-bottom: 20px;
        margin-top: 10px;
    }
    .card_close_btn{
        position: absolute;
        right: 20px;
        top: 20px;
    }
    .card_close_btn img{
        width: 20px;
        height: 20px;
    }
    .tsc_box{
        display: flex;
        margin: 0 auto;
    }
    .tsc_box a{
        text-decoration: none;
        color: #909090;
        margin-right: 10px;
    }
    .input_box{
        width: 70%;
        margin: auto;
    }
    .fgx{
        height: 2px;
        width: 100%;
        background-color: #cccccc;
    }
    .jbzh{
        width: 100%;
        height: 100px;
        display: flex;
        margin-top: auto;
        background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(240,240,240,1));
    }
    .dl_task_box{
        position: fixed;
        width: 40vw;
        height: auto;
        background-color: white;
        padding: 30px;
        padding-top: 10px;
        border-radius: 25px;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
        bottom: 25px;
        right: 20px;
        z-index: 99999999999;
    }
    .task_inf{
        display: flex;
    }
    a{
        text-decoration: none;
    }
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    .loading_ico{
        animation: rotate 2s linear infinite;
    }
</style>
<div class="top_guide">
    <h2 class="name_logo top_m">MHY新闻资源搜索</h2>
    <div class="function_guide">
        <div class="function_button" onclick="mhy_cardChange('ys')" id="ys_b">
            <p>原神</p>
        </div>
        <div class="function_button" onclick="mhy_cardChange('sr')" id="sr_b">
            <p>崩铁</p>
        </div>
        <div class="function_button" onclick="mhy_cardChange('zzz')" id="zzz_b">
            <p>绝区零</p>
        </div>
    </div>
    <a class="top_m" href="javascript:void(0);" onclick="open_dlDir()"><img width="20px" height="20px" src="dir_ico.png"></a>
    <a class="top_m" href="javascript:void(0);" onclick="update_news()"><img id="update_loadICO" width="20px" height="20px" src="update_ico.png"></a>
    <a class="top_m" href="javascript:void(0);" onclick="goto('https://gitee.com/codevicent/gameNews_searcher')"><img width="20px" height="20px" style="margin-right: 30px;" src="gitee.png"></a>
</div>
<div style="height: 45px;"></div>
<div class="jx_box" id="jx_box" style="display: none;">
    <a class="card_close_btn" href="javascript:void(0);" onclick="close_card()"><img src="https://pic.imgdb.cn/item/65b327d3871b83018a20c164.png"></a>
    <div class="scroll_box" id="fx_box">
        <div class="loading" id="loading_box" style="display: none;">
            <img src="https://pic.imgdb.cn/item/65b31346871b83018ae4ec5d.gif">
        </div>
        <div class="fx_content_box">
            <h1 id="f_title_show">文件列表</h1>
            <div class="loading" id="fx_noData" style="display:none;">
                <img src="https://pic.imgdb.cn/item/65b361c8871b83018ae9e217.png">
            </div>
            <div id="fx_img">
                <h3>图片</h3>
                <div class="img_pBox" id="img_pBox"></div>
            </div>
            <div id="fx_video">
                <h3>视频</h3>
                <div class="vid_pBox" id="vid_pBox"></div>
            </div>
        </div>
    </div>
</div>
<div class="up_top" id="banner" style="position: relative;">
    <div class="up_top_main">
        <img class="mhy_logo" src="https://ys.mihoyo.com/main/_nuxt/img/logo-header-cut.f78aabc.png" width="543" height="99" id="ys_logo" style="display:none;">
        <img class="mhy_logo" src="https://webstatic.mihoyo.com/upload/event/2022/07/29/c31dd1d732913e4ab5f3d4f03346a706_9097205533659112586.png" width="185.25" height="99" id="sr_logo" style="display:none;">
        <img class="mhy_logo" src="https://zzz.mihoyo.com/_nuxt/img/logo-sm.1b88313.svg" width="543" height="99" id="zzz_logo" style="display:none;">
        <div class="input_bar">
            <div class="input_box">
                <div class="search">
                    <input type="search" id="input_key" placeholder="你要找什么？">
                    <a class="button" href="javascript:void(0);" onclick="run_search()">Go</a>
                </div>
                <div class="tsc_box" id="tsc_box"></div>
            </div>
        </div>
    </div>
    <div class="jbzh" style="position:absolute;bottom:0px;"></div>
</div>
<!-- <div class="fgx"></div> -->
<!-- <button class="action_button updata_b" onclick="updata()">请求更新数据库</button> -->
<div class="under" id="under">
    <div class="result_box" id="main_result_box">
        <div class="result_box reuslt_packBox" id="ys_rr_box" style="display: block;">
            <h1 style="color:rgb(210,210,210);text-align:center;">正在等待搜索....</h1>
        </div>
        <div class="result_box reuslt_packBox" id="sr_rr_box" style="display: none;">
            <h1 style="color:rgb(210,210,210);text-align:center;">正在等待搜索....</h1>
        </div>
        <div class="result_box reuslt_packBox" id="zzz_rr_box" style="display: none;">
            <h1 style="color:rgb(210,210,210);text-align:center;">正在等待搜索....</h1>
        </div>
    </div>
</div>
<div class="dl_task_box" id="dl_task_box" style="display: none;">
    <!-- <div class="a_dl_task">
        <div class="task_inf">
            <h4>文件名称</h4>
            <p style="margin-left: auto;">进程显示</p>
        </div>
        <div class="mdui-progress">
            <div class="mdui-progress-determinate" style="width: 0%;"></div>
        </div>
    </div> -->
</div>
<script>
    // const api_server = "code-vicent.top:81"
    had_load = [] //用于判断当前板块是否被加载过
    load_type="ys"
    pack_data={}
    const tsc_dic={
        "ys":["PV","EP","角色PV","角色演示","过场动画","定格动画","动画短片","壁纸","前瞻","生日"],
        "sr":["PV","EP","角色PV","剧情PV","走近星穹","动画"],
        "zzz":["PV","壁纸"]
    }
    function w_log(msg){
        alert(msg["msg"]);
    }
    // function updata(){
    //     network("",window.origin+"/app/mhy_dl/api/up_data/",w_log)
    // }
    async function fx_f(cid,ctitle){
        document.getElementById("fx_box").style.overflow="hidden"
        document.getElementById("loading_box").style.display="flex"
        document.getElementById("jx_box").style.display="flex"
        document.getElementById("f_title_show").innerText=ctitle

        fx_r = await window.pywebview.api.run_finder(part,cid)
        deal_fx(fx_r)
        // network("","/app/mhy_dl/api/finder/?p="+part+"&cid="+cid,deal_fx)
    }
    function read_c(cid){
        if(load_type=="ys"){
            window.open("https://ys.mihoyo.com/main/news/detail/"+cid)
        }else if(load_type=="sr"){
            window.open("https://sr.mihoyo.com/news/"+cid+"?nav=news")
        }else if(load_type=="zzz"){
            window.open("https://zzz.mihoyo.com/news/"+cid)
        }
    }
    part = "ys"
    function network(path,action){
        const request = new XMLHttpRequest();
        request.withCredentials = true;
        request.open("GET",path);
        request.send();
        request.onload = () => {
            data = request.response
            data = eval("("+data+")")
            action(data)
        }
    }
    const Page = {
        "ys":[document.getElementById("ys_b"),"/ys.jpg",document.getElementById("ys_logo")],
        "sr":[document.getElementById("sr_b"),"/sr.jpg",document.getElementById("sr_logo")],
        "zzz":[document.getElementById("zzz_b"),"/zzz.jpg",document.getElementById("zzz_logo")],
    }
    const old_css = Page["ys"][0].style
    function mhy_cardChange(id){
        console.log(id)
        for(const p in Page){
            this_p = Page[p]
            this_p[0].style=old_css
        }
        Page[id][0].style.backgroundColor="rgb(255,255,255)"
        load_img(id)
        part=id
        if((had_load.includes(id))==false){
            start_news()
        }
        for(rc of document.querySelectorAll(".reuslt_packBox")){
            rc.style.display="none"
        }
        var tsc_html=""
        for(tsc_key of tsc_dic[id]){
            tsc_html+=`<a href="javascript:void(0);" onclick="tsc('${tsc_key}')">${tsc_key}</a>`
        }
        document.getElementById("tsc_box").innerHTML=tsc_html
        document.getElementById(part+"_rr_box").style.display="blcok"
        setTimeout(show_card,100)
        
    }
    function show_card(){
        document.getElementById(part+"_rr_box").style.display=""
        for(banner_e of document.querySelectorAll(".banner_bar")){
            banner_e.style.height = banner_e.parentElement.clientHeight +"px"
        }
    }
    function load_img(board){
        e = document.getElementById("banner")
        e.style.backgroundImage=`url('${Page[board][1]}')`
        e.style.backgroundSize="cover"
        e.style.backgroundRepeat="no-repeat"
        e.style.backgroundPosition="center"
        for(const p in Page){
            this_p = Page[p]
            this_p[2].style="display:none"
        }
        document.getElementById(board+"_logo").style="display:flex;margin:auto;"
    }
    load_img("ys")
    const part_macth={
        "ys":["YS_allData","原神"],
        "sr":["SR_allData","崩铁"],
        "zzz":["ZZZ_allData","绝区零"]
    }
    function deal_search(data){
        if(data["success"]==true){
            try{document.getElementById(part+"_rr_box").remove()}catch{}
            if(data["data"].length>=1){
                new_rbox = document.createElement("div")
                new_rbox.className="result_box reuslt_packBox"
                new_rbox.id=part+"_rr_box"
                part_note = document.createElement("h3")
                if(had_load.includes(part)){
                    part_note.innerText=part_macth[part][1]+"板块搜索结果：共"+data["data"].length+"条"
                }else{
                    part_note.innerText=part_macth[part][1]+"板块近期更新："
                    had_load.push(part)
                }
                new_rbox.appendChild(part_note)
                new_rbox.had_load_count = 0
                pack_data[part]=data["data"]
                document.getElementById("under").appendChild(new_rbox)
                lay_out()
            }else{
                new_rbox = document.createElement("div")
                new_rbox.className="result_box reuslt_packBox"
                new_rbox.id=part+"_rr_box"
                part_note = document.createElement("h3")
                part_note.innerText=part_macth[part][1]+"板块搜索结果："
                new_rbox.appendChild(part_note)
                no_note = document.createElement("h2")
                no_note.style="color:rgb(210,210,210);text-align:center;"
                no_note.innerText="无搜索结果，请更换关键词（注意PV,EP要大写）"
                new_rbox.appendChild(no_note)
                document.getElementById("under").appendChild(new_rbox)
            }
        }
    }
    function lay_out(){
        console.log("bf_"+part)
        var this_rBox = document.getElementById(part+"_rr_box")
        if(this_rBox.had_load_count < pack_data[part].length && pack_data[part].length>0){
            if(pack_data[part].length-this_rBox.had_load_count<20){
                var pack_num = pack_data[part].length-this_rBox.had_load_count
            }else{
                pack_num = 20
            }
            for(let c=0;c<pack_num;c++){
                d=pack_data[part][this_rBox.had_load_count+c]
                new_rcard=document.createElement("div")
                new_rcard.className="result_card"
                // <div class="button_bar"><button class="action_button" onclick="fx_f('${d["id"]}')">解析文件</button><button class="action_button" onclick="read_c('${d["id"]}')">阅读原文</button></div>
                new_rcard.innerHTML=`
                <div class="r_inf">
                    <h3>${d["title"]}</h3>
                    <p>${d["time"]}</p>
                    <div class="button_bar"><a class="action_button" href="javascript:void(0);" onclick="fx_f('${d["id"]}','${d["title"]}')"><div class="btn_view"><img src="https://pic.imgdb.cn/item/65b30f18871b83018ad9d68d.png"><p>文件列表</p></div></a><a class="action_button" href="javascript:void(0);" onclick="read_c('${d["id"]}')"><div class="btn_view"><img src="https://pic.imgdb.cn/item/65b30f18871b83018ad9d649.png"><p>阅读原文</p></div></a></div>
                </div>
                <div class="banner_bar" style="background-image: url('${d["banner"]}');background-size: cover;"></div>
                `
                new_rbox.appendChild(new_rcard)
            }
            document.getElementById(part+"_rr_box").style.display="block"
            for(banner_e of document.querySelectorAll(".banner_bar")){
                banner_e.style.height = banner_e.parentElement.clientHeight +"px"
            }
            this_rBox.had_load_count+=pack_num
        }
    }
    async function run_search(){
        kw=document.getElementById("input_key").value
        search_r = await window.pywebview.api.search(part,kw)
        deal_search(search_r)
        // network("","/app/mhy_dl/api/search/?kw="+kw+"&p="+part_macth[part][0],deal_search)
        load_type = part
    }
    function tsc(key_w){
        document.getElementById("input_key").value=key_w
        run_search()
    }
    async function start_news(){
        news_data = await window.pywebview.api.get_news(part)
        deal_search(news_data)
        // network("","/app/mhy_dl/api/news/?p="+part_macth[part][0],deal_search)
    }
    function deal_fx(data){
        var img_pBox = document.getElementById("img_pBox")
        var vid_pBox = document.getElementById("vid_pBox")
        document.getElementById("loading_box").style.display="none"
        document.getElementById("fx_box").style.overflow="scroll"
        if(data["success"]){
            if(data["data"]["img"].length <= 0 && data["data"]["video"].length>=1){
                document.getElementById("fx_img").style.display="none"
                document.getElementById("fx_video").style.display="block"
            }else if(data["data"]["img"].length >= 1 && data["data"]["video"].length<=0){
                document.getElementById("fx_img").style.display="block"
                document.getElementById("fx_video").style.display="none"
            }else if(data["data"]["img"].length <=0 && data["data"]["video"].length<=0){
                document.getElementById("fx_img").style.display="none"
                document.getElementById("fx_video").style.display="none"
                document.getElementById("fx_noData").style.display="flex"
            }else{
                document.getElementById("fx_img").style.display="block"
                document.getElementById("fx_video").style.display="block"
            }
            box_html=""
            for(img_d of data["data"]["img"]){
                box_html+=`<img src="${img_d}">`
            }
            img_pBox.innerHTML=box_html
            box_html=""
            for(vid_d of data["data"]["video"]){
                var file_name = vid_d.split("/")
                file_name = file_name[file_name.length-1]
                box_html+=`
                <div class="a_vid">
                    <div style="display: flex;">
                        <a href="${vid_d}" style="color:rgb(100,100,100)">${file_name}</a>
                        <a style="margin-left: auto;" href="javascript:void(0);" onclick="download_vid('${vid_d}','${file_name}')"><img src="https://pic.imgdb.cn/item/65b32057871b83018a0a53ea.png"></a>
                    </div>
                    <video src="${vid_d}" controls></video>
                </div>
                `
            }
            vid_pBox.innerHTML=box_html
        }
    }
    task_show={}
    function create_dlTask_show(file_name){
        new_task=document.createElement("div")
        new_task.className="a_dl_task"
        new_task.id=file_name+"_dlTask"
        new_task.innerHTML=`
            <div class="task_inf">
                <h4>${file_name}</h4>
                <p id="${file_name+"_dlTask_pP"}" style="margin-left: auto;">进程显示</p>
            </div>
            <div class="mdui-progress">
                <div id="${file_name+"_dlTask_bP"}" class="mdui-progress-determinate" style="width: 0%;"></div>
            </div>
        `
        document.getElementById("dl_task_box").appendChild(new_task)
        task_show[file_name]={
            "pP":document.getElementById(file_name+"_dlTask_pP"),
            "bP":document.getElementById(file_name+"_dlTask_bP"),
            "name":file_name+"_dlTask",
            "key_name":file_name,
            "box":new_task
        }
        document.getElementById("dl_task_box").style.display="block"
        return file_name
        // return {
        //     "pP":document.getElementById(file_name+"_dlTask_pP"),
        //     "bP":document.getElementById(file_name+"_dlTask_bP"),
        //     "name":file_name+"_dlTask",
        //     "key_name":file_name
        // }
    }
    function finish_dlTask_show(ts_key){
        ts = task_show[ts_key]
        ts["bP"].style.backgroundColor="rgb(0, 210, 170)"
        setTimeout(function(){
            document.getElementById(ts["name"]).remove()
            delete task_show[ts["key_name"]]
            if(Object.keys(task_show).length<=0){
                document.getElementById("dl_task_box").style.display="none"
            }
        },3000)
    }
    async function download_vid(path,origin_fn){
        var file_type = origin_fn.split(".")
        file_type=file_type[file_type.length-1]
        var dl_fn = document.getElementById("f_title_show").innerText+"."+file_type
        var task_show=await create_dlTask_show(dl_fn)

        window.pywebview.api.download(path,dl_fn,task_show)
        // await downloadVideo(path,dl_fn,task_show);
    }
    function updateProgress(ts_key,loaded,total_size){
        ts=task_show[ts_key]
        progress=loaded / total_size
        show_loaded=loaded/(1024*1024)
        show_total=total_size/(1024*1024)
        ts["pP"].innerText=`${show_loaded.toFixed(2)}MB/${show_total.toFixed(2)}MB ${Math.round(progress * 100)}%`
        ts["bP"].style.width=`${Math.round(progress * 100)}%`
    }
    function isAtBottom() {
        var windowHeight = document.documentElement.clientHeight|| document.body.clientHeight;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var documentHeight = document.documentElement.scrollHeight || document.body.scrollHeight
        if(windowHeight + scrollTop >= documentHeight-100){
            return true
        }else{
            return false
        }
    }
    async function update_news(){
        ico_img = document.getElementById("update_loadICO")
        ico_img.src="loading_ico.png"
        ico_img.className = "loading_ico"
        await window.pywebview.api.updateNews()
        ico_img.src="update_ico.png"
        ico_img.className = ""
    }
    async function open_dlDir(){
        window.pywebview.api.open_dlDir()
    }
    // 添加滚动事件监听器
    window.addEventListener('scroll', function() {
        if (isAtBottom()) {
            lay_out()
        }
    });
    window.addEventListener('pywebviewready',async function() {
        mhy_cardChange("ys")
        start_news()
        update_news()
        // start_news()
    })
</script>
<div class="bottom_show" style="background-color: rgb(232, 232, 232);display: flex;">
    <div style="margin: auto;">
        <p style="color: #909090;">Made by: Vicent轩</p>
    </div>
</div>
<script>
    function home(){
        window.open(window.location.origin,"_self")
    }
    function goto(url){
        window.pywebview.api.open_link(url)
    }
    function set_name(data){
        if(data["success"]==true){
            document.getElementById("user_name_bar").innerText = data["data"]["userName"]
        }else{
            document.getElementById("user_name_bar").innerText = "请登录"
        }
    }
    function close_card(){
        for(v of document.querySelectorAll("video")){
            v.src = ""
        }
        document.getElementById("jx_box").style.display="none"
    }
</script>